<template>
  <div>
    <nav-top title="优惠券" :goback="true"></nav-top>
    <section class="coupon">
      <div v-if="!showCoupon" class="without">暂无优惠券~</div>
      <div v-else class="couponList">
        <ul>
          <li @click="selectCoupon(key)" v-for="(val,key) in couponList" :key="val.id">
            <div class="content">
              <img class="active-img" v-if="key==active" src="/static/icon/coupon/select.png" />
              <div class="img">
                <img src="/static/icon/logo.png" alt />
              </div>
              <div class="text">
                <p>{{val.name}}</p>
                <div class="intro">
                  {{val.intro}}
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="bottom">暂无更多优惠券~</div>
      </div>
    </section>
  </div>
</template>
<script>
import NavTop from "@/components/nav/navBar";

export default {
  components: {
    NavTop
  },
  data() {
    return {
      active: 0,
      couponList: [
        {
          id: 0,
          name: "医生专科预约",
          intro: "会员用户具有一定免费次数，剩余 3次剩余 3次。"
        },
        {
          id: 1,
          name: "500元代金券",
          intro: "仅指定体检项目可用。"
        }
      ],
      showCoupon: true
    };
  },
  created() {
    if (this.couponList.length > 0) {
      this.showCoupon = true;
    } else {
      this.showCoupon = false;
    }
  },
  methods: {
    selectCoupon(key) {
      this.active = key;
    }
  }
};
</script>
<style lang="scss" scoped>
.coupon {
  width: 320px;
  .without {
    position: absolute;
    top: 338px;
    left: 116px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(103, 103, 103, 1);
  }
  .couponList {
    margin-top: 66px;
    .content {
      // display: flex;
      width: 288px;
      height: 87px;
      margin: 23px auto;
      border-radius: 5px;
      border: 1px solid #06a44f;
      border-left: none;
      position: relative;
      .img {
        float: left;
        width: 96px;
        height: 87px;
        background: #06a44f;
        border-radius: 5px;
        text-align: center;
        img {
          width: 48px;
          height: 48px;
          padding-top: 20px;
        }
      }
      .active-img {
        width: 32px;
        height: 20px;
        position:absolute;
        right: 0;
        top: 0;
      }
      .text {
        margin-left: 106px;
        p {
          font-size: 13px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(6, 164, 79, 1);
            line-height: 1em;
        }
      }
        .intro {
          margin-right: 20px;
          padding-top: 8px;
          border-top: 1px solid rgba(181, 181, 181, 1);
            font-size: 10px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(181, 181, 181, 1);
            line-height: 1.4em;
        }
    }
    .bottom {
      font-size: 10px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(103, 103, 103, 1);
      margin-top: 28px;
      text-align: center;
    }
  }
}
</style>